<template>
  <div class="login-box">
    <img class="leftImg" src="@/assets/images/leftImg.png" />
    <div class="login">
      <div class="login-logo">
        <!-- <svg-icon name="logo" :size="45" /> -->
        <img src="~@/assets/images/logo.png" width="28" />
        <h1 class="mb-0 ml-1 text-2xl font-bold">豆子组件库系统</h1>
      </div>
      <div class="title">账号密码登录</div>
      <a-form layout="horizontal" :model="state.formInline" @submit.prevent="handleSubmit">
        <a-form-item>
          <a-input v-model:value="state.formInline.userLogin" placeholder="请输入账号">
            <template #prefix><user-outlined type="user" /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password
            v-model:value="state.formInline.password"
            type="password"
            placeholder="请输入密码"
            autocomplete="new-password"
          >
            <template #prefix><lock-outlined type="user" /></template>
          </a-input-password>
        </a-form-item>
        <!-- <a-form-item>
        <a-input
          v-model:value="state.formInline.verifyCode"
          placeholder="验证码"
          :maxlength="4"
          size="large"
        >
          <template #prefix><SafetyOutlined /></template>
          <template #suffix>
            <img
              :src="state.captcha"
              class="absolute right-0 h-full cursor-pointer"
              @click="setCaptcha"
            />
          </template>
        </a-input>
      </a-form-item> -->
        <a-form-item>
          <a-checkbox v-model:checked="state.checked">记住密码</a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  // @ts-nocheck
  import { reactive, onMounted } from 'vue';
  import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
  import { useRoute, useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  // import { getImageCaptcha } from '@/api/login';
  import { to } from '@/utils/awaitTo';
  import md5 from 'js-md5';
  import { Storage } from '@/utils/Storage';

  const state = reactive({
    loading: false,
    captcha: '',
    formInline: {
      userLogin: Storage.get('userLogin') || '',
      password: Storage.get('password') || '',
    },
    checked: Storage.get('checked') || false,
  });
  const route = useRoute();
  const router = useRouter();

  const userStore = useUserStore();

  // const setCaptcha = async () => {
  //   const { id, img } = await getImageCaptcha({ width: 100, height: 50 });
  //   state.captcha = img;
  //   state.formInline.captchaId = id;
  // };
  // setCaptcha();

  const handleSubmit = async () => {
    Storage.set('userLogin', { id: '123' });
    Storage.set('ACCESS_TOKEN', '123');
    setTimeout(() => router.replace('/dashboard'));
    return;
    const { userLogin, password } = state.formInline;
    if (userLogin.trim() == '' || password.trim() == '') {
      return message.warning('用户名或密码不能为空！');
    }

    message.loading('登录中...', 0);
    state.loading = true;
    // params.password = md5(password)
    const params = {
      userLogin,
      password: md5(password),
    };

    const [err] = await to(userStore.login(params));
    if (err) {
      Modal.error({
        title: () => '提示',
        content: () => err.message,
      });
    } else {
      message.success('登录成功！');
      Storage.set('userLogin', userLogin);

      if (state.checked) {
        Storage.set('password', password);
        Storage.set('checked', state.checked);
      } else {
        Storage.remove('password');
      }
      setTimeout(() => router.replace('/dashboard'));
    }
    state.loading = false;
    message.destroy();
  };
</script>

<style lang="less" scoped>
  .login-box {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding-left: 20vw;
    background: url('@/assets/login.png');
    background-size: 100%;
    .leftImg {
      width: 440px;
      height: 400px;
      margin-right: 190px;
    }
    .login {
      display: flex;
      flex-direction: column;
      padding: 60px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 18px rgba(136, 187, 252, 0.25);

      .title {
        color: #444444;
        font-size: 16px;
        margin-bottom: 16px;
      }

      .login-logo {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .svg-icon {
          font-size: 48px;
        }
      }

      :deep(.ant-form) {
        width: 320px;

        .ant-col {
          width: 100%;
        }

        .ant-form-item-label {
          padding-right: 6px;
        }
      }
    }
  }
</style>
